<template>
	<div class="shopindexheader">
		<div class="header">
			<div class="left">
				<img src="../assets/img/logo.png" alt="" class="logo" @click="GoToIndex">
			</div>
			<transition name="el-zoom-in-center">
				<div v-show="ShearchShow" class="center">
					<el-select v-model="select" placeholder="宝贝" class="serch-select" size="mini"
						@change="SelectChange">
						<el-option label="店铺" value="1" />
						<el-option label="宝贝" value="2" />
					</el-select>
					<el-input v-model="input1" class="serch-input" placeholder="输入你的关键字" size="mini">
						<!-- @change="InputChange" -->
						<!-- @input="InputInput" -->
						<el-button slot="suffix" icon="el-icon-search" circle @click="Search" />
					</el-input>
				</div>
			</transition>
			<div class="right" :style="{filter:active?'opacity(0.5)':'none'}">
				<div class="iconGroup">
					<div v-if="!ShearchShow" class="name-box" @click="SearchButton">
						<img src="../assets/img/1.png" alt="">
						<span :style="{filter:active?'invert(1)':'none'}">搜索</span>
					</div>

					<div v-if="ShearchShow" class="name-box">
						<div @click="SearchButton">
							<i class="el-icon-close" style="color: #000000;font-weight: bold;font-size: 1.2rem;" />
						</div>
					</div>
					<div class="name-box" :style="{filter:active?'invert(1)':'none'}" @mouseenter="showLogin = true"
						@mouseleave="showLogin = false">
						<img src="../assets/newPage/yonghu.png" alt="" @click="person">
						<span @click="person">{{ user.cUserName||'登录/注册' }}</span>
						<div v-if="user.cUserName&&showLogin" class="over">
							<p @click="person">
								个人中心
							</p>
							<p @click="loginOut">
								退出
							</p>
						</div>
					</div>
					<div class="name-box" :style="{filter:active?'invert(1)':'none'}" @click="goShoppingCart">
						<img src="../assets/newPage/gouwu.png" alt="">
						<span>购物车</span>
					</div>
					<div class="name-box" :style="{filter:active?'invert(1)':'none'}">
						<img src="../assets/newPage/more.png" alt="">
					</div>

					<!-- <img
            src="../assets/img/3.png"
            alt=""
            @click="gohome"
          > -->
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	export default {
		name: "",
		components: {},
		props: {
			pagerstyle: {
				type: String,
				default: "",
			},
			pagetShopID: {
				type: String,
				default: "",
			},
			pagetStatus: {
				type: Boolean,
				default: true
			}
		},
		data() {
			return {
				showSearch: false,
				falgs: false,
				ShearchShow: false,
				activeIndex: "1",
				classify: [{
					name: "首页",
					id: "1",
					path: "/",
				}, ],
				select: "1", // 搜索店铺/商品
				input1: "", // 搜索内容
				active: true,
				user: {
					cUserName: ''
				},
				showLogin: false
			};
		},
		watch: {
			$route: function() {
				console.log('ShopIndexHeader', this.$route.path, this.$route)
				if (this.$route.path === '/shopindex') {
					this.select = "1" // 搜索店铺/商品
					this.input1 = "" // 搜索内容
				} else {
					return false
				}
			}
		},
		mounted() {
			setTimeout(() => {

				if (localStorage.getItem('token')) {
					let data = {
						token: localStorage.getItem("token"),
						data: {}
					}
					this.$api.person.userInfo(data).then((res) => {
						// 执行某些操作
						if (res.code == 200) {

							this.user = res.data;

						}
					});
				} else {
					this.GetCsLogin()
				}
				// if (localStorage.getItem('token')) {
				// 	this.user = JSON.parse(localStorage.getItem("userInfo"))
				// }
			}, 1000)
		},
		methods: {
			// 搜索动画
			SearchButton() {
				console.log('SearchButton', )
				this.ShearchShow = !this.ShearchShow
				if (!this.ShearchShow) {
					this.select = '1',
						this.input1 = ''
				}
			},
			changeitem(item) {
				this.activeIndex = item.id;
				this.$router.push({
					path: "/cate",
					query: {
						id: item.id,
					},
				});
			},
			person() {
				if (localStorage.getItem("token")) {
					this.activeIndex = "";
					this.$router.push({
						path: "/person",
					});
				} else {
					// let url = encodeURIComponent(location.href.split('#')[0])
					// let url = encodeURIComponent("http://jtsc.hawkhawk.club/api/index/cas");
					// window.location.href =
					// 	"http://issosit.ysyec.com/isso/login?service=" + url;
					// let url = encodeURIComponent("https://mallmgt.inja.com/api/index/cas");
					// window.location.href = "https://isso.inja.com/isso/login?service=" + url;
					let url = encodeURIComponent(window.location.href);
					window.location.href =
						"https://isso.inja.com/isso/oidc/authorize?scope=openid&response_type=code&client_id=qd.prod&state=qd.prod&redirect_uri=" +
						url;
				}
			},
			gohome() {
				window.location.href = "https://inja.com/portal"; // 正式
				// window.location.href = "http://portalsit.ysyec.com/portal/#cancel=true" // 测试
			},
			Search() {
				console.log('搜索', this.select, this.input1)
				this.$router.push({
					path: "/searchpage",
					query: {
						select: this.select,
						input: this.input1,
						ShopID: sessionStorage.getItem("ShopID"),
						times: (new Date()).getTime()
					},
				});
			},
			// 改变选择的值（1店铺，2宝贝）
			SelectChange(SelectChange) {
				console.log('改变搜索的值', SelectChange)
				this.$router.push({
					path: "/searchpage",
					query: {
						select: SelectChange,
						input: this.input1,
						ShopID: sessionStorage.getItem("ShopID")
					},
				});
			},
			// 仅在输入框失去焦点或用户按下回车时触发
			InputChange(change) {
				console.log('仅在输入框失去焦点或用户按下回车时触发', change, this.select)
				this.$router.push({
					path: "/searchpage",
					query: {
						select: this.select,
						input: change,
						ShopID: sessionStorage.getItem("ShopID")
					},
				});
			},
			// 在 Input 值改变时触发
			InputInput(input) {
				console.log('在 Input 值改变时触发', input, this.select, this.pagetShopID, this)
				this.$router.push({
					path: "/searchpage",
					query: {
						select: this.select,
						input: input,
						ShopID: sessionStorage.getItem("ShopID")
					},
				});
			},
			// 点击logo回首页
			GoToIndex() {
				this.$router.push({
					path: "/",
				});
			},
			goShoppingCart() {
				this.$router.push({
					path: "/cart",
				});
			},
			loginOut() {
				localStorage.clear()
				window.location.reload()
			},
			GetQueryString(name) {
				var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
				var r = window.location.search.substr(1).match(reg);
				if (r !== null) return unescape(r[2]);
				return null;
			},
			GetCsLogin() {
				console.log('111')
				let that = this
				let params = {
					code: that.GetQueryString("code"),
					redirect_uri: encodeURIComponent(window.location.href)
				};
				if (params.code) {
					instance.post('https://mallmgt.inja.com/api/user/getUserInfoByCode', params).then(
							function(res) {
								if (res.code == 1) {
									that.user.cUserName = res.data.user.username
									window.localStorage.setItem("token", res.data.token);
									window.localStorage.setItem("userInfo", JSON.stringify(res.data.user));

								}

							})
						.catch(function(error) {
							console.log(error);
						});

				}
			},
		},
	};
</script>

<style scoped lang="scss">
	.shopindexheader {
		.header {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			opacity: 0.95;
			height: 3.6rem;
			background: #fff;
			// background: rgba(0, 0, 0, 1);
			// opacity: 0.95;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 10rem;
			z-index: 999;
			box-shadow: 0 2px 10px -1px rgba(0, 0, 0, .1);
			filter: invert(1);

			&.actives {
				background: #FFFFFF;
			}

			.logo {
				cursor: pointer;
			}

			.left {
				height: 100%;
				display: flex;
				justify-content: flex-start;
				align-items: center;
			}

			.center {
				color: black;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				width: 30%;

				.serch-select {
					width: 20%;

				}

				.serch-select ::v-deep .el-input__inner {
					border-radius: 0;
					background: white;
					border: none;
					border-bottom: 1px solid black;
					color: black;
					font-size: 0.9rem;
					height: 2.5rem !important;
					line-height: 2.5 !important;
				}

				.serch-input ::v-deep .el-input__inner {
					border-radius: 0;
					background: white;
					border: none;
					color: black;
					border-bottom: 1px solid black;
					font-size: 0.9rem;
					height: 2.5rem !important;
					line-height: 2.5 !important;
				}
			}

			.logo {
				cursor: pointer;
				width: 24.19rem;
			}

			.left {
				// width: 50%;
				width: 30%;
				height: 100%;
				display: flex;
				justify-content: flex-start;
				align-items: center;
			}

			.right {
				height: 50%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				color: black;

				.menu {
					width: 50rem;
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;

					.menu-item {
						cursor: pointer;
						font-size: 0.88rem;
						font-family: Microsoft YaHei;
						font-weight: 400;
						color: rgba(255, 255, 255, 1);
						border-bottom: 1px solid #000;
						padding: 0.44rem 0;

						&.active {
							color: #08c19d;
							border-bottom: 1px solid #08c19d;
						}

						&:hover {
							color: #08c19d;
						}
					}
				}

				.searchInput {
					input {
						height: 2rem;
						line-height: 2;
						background: transparent;
						border-bottom: 0.06rem solid rgba(255, 255, 255, 0.6);
						width: 0;
						transition-duration: 0.5s;
						transition-property: all;
						transition-timing-function: ease;
						transition-delay: 0s;
						outline: none;
						color: #fff;
						font-size: 0.88rem;

						&.focus {
							width: 48rem !important;
						}
					}
				}

				.iconGroup {
					// width: 3rem;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.name-box {
						display: flex;
						justify-content: flex-start;
						align-items: center;
						margin-right: 3.13rem;
						cursor: pointer;
						position: relative;

						img {

							width: 1.1rem;
							margin-right: 0.6rem;
						}

						span {
							font-size: 1rem;
							font-family: SourceHanSansCN;
							font-weight: 500;
							color: #FFFFFF;
						}

						.over {
							position: absolute;
							top: 100%;
							left: 10%;
							padding-top: 10px;

							&::before {
								position: absolute;
								right: 16px;
								top: -8px;
								content: '';
								border-style: solid;
								border-width: 9px 7px;
								border-color: transparent transparent #333 transparent;
							}

							p {
								background: #333;
								display: flex;
								justify-content: center;
								align-items: center;
								color: #fff;
								font-size: 1.13rem;
								margin-bottom: 0.05rem;
								width: 7rem;
								height: 2rem;

							}
						}

						&:last-child {
							margin-right: 0;
						}
					}

					i {
						cursor: pointer;
					}

					img {
						cursor: pointer;
						width: 1rem;
					}
				}
			}
		}
	}
</style>
<style scoped>
	.shop-show-l {
		border-right: 1px solid #e2e2e2;
		margin-right: 1rem;
	}

	.shop-title {
		margin: 1rem 0 0.4rem 0;
	}

	.shop-item {
		font-size: 0.6rem;
		font-weight: 400;
		line-height: 1.5rem;
	}

	.shop-show-r {
		text-align: center;
		overflow: hidden;
	}

	.erwma {
		border: 1px solid #e2e2e2;
		padding: 0.2rem;
		font-size: 0.2rem;
		width: 9rem;
		margin: 1rem auto;
		font-weight: 400;
	}

	.erwma-logo {
		height: 8rem;
		width: 9rem;
		margin-bottom: 0.4rem;
	}

	.el-select-dropdown__item.selected {
		color: #08c19d;
	}

	.el-button.is-circle {
		background: none;
		border: none;
		color: black;
		padding: 0.6rem 0 0 0;
	}
</style>
